<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社区论坛 - 宠物邻里互助平台</title>
    <%-- 引入CSS样式和Font Awesome图标库 --%>
    <style>
        /* 样式定义部分省略... */
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<%-- 引入顶部导航栏 --%>
<jsp:include page="headForum.jsp"></jsp:include>

<div class="main-container">
    <%-- 左侧内容区域 --%>
    <div class="content-area">
        <div class="main-content">
            <div class="header">
                <h2><i class="fas fa-comments"></i> 社区论坛</h2>
                <%-- 发帖按钮 --%>
                <button class="post-btn" id="showPostBox">
                    <i class="fas fa-plus"></i> 发表帖子
                </button>
            </div>

            <%-- 发帖表单 --%>
            <form action="${pageContext.request.contextPath}/forum/add" method="post">
                <div class="post-box" id="postBox">
                    <textarea placeholder="分享你的新鲜事..." name="content" required></textarea>
                    <input type="hidden" name="user_id" value="${login_user.user_id}">
                    <div class="post-options">
                        <button type="submit" class="post-submit">
                            <i class="fas fa-paper-plane"></i> 发布
                        </button>
                    </div>
                </div>
            </form>

            <%-- 帖子列表循环 --%>
            <c:forEach items="${forumList}" var="forum">
                <div class="post">
                        <%-- 帖子内容 --%>
                    <div class="post-content">
                            ${forum.content}
                    </div>

                        <%-- 帖子元信息 --%>
                    <div class="post-meta">
                        <i class="far fa-user"></i> ${login_user.username}
                        <i class="far fa-clock" style="margin-left: 15px;"></i> ${forum.create_time}
                    </div>

                        <%-- 点赞信息 --%>
                    <div class="likes">
                        <i class="fas fa-heart"></i> ${forum.like_count}人觉得很赞
                    </div>

                        <%-- 评论表单 --%>
                    <div class="comment-form-container" id="commentForm-${forum.share_id}">
                        <form class="comment-form" action="${pageContext.request.contextPath}/comment/addComment" method="post">
                            <input type="hidden" name="share_id" value="${forum.share_id}">
                            <textarea name="content" placeholder="写下你的评论..." required></textarea>
                            <div class="comment-form-buttons">
                                <button type="button" class="comment-cancel" onclick="hideCommentForm(${forum.share_id})">取消</button>
                                <button type="submit" class="comment-submit">发布</button>
                            </div>
                        </form>
                    </div>

                        <%-- 评论列表 --%>
                    <div class="comments">
                        <c:forEach items="${forum.comments}" var="comment">
                            <div class="comment">
                                <span class="comment-author">${comment.author_name}</span>${comment.content}
                                <span class="comment-meta">${comment.create_time}</span>
                            </div>
                        </c:forEach>
                    </div>

                        <%-- 帖子操作按钮 --%>
                    <div class="post-actions">
                        <div class="post-action">
                            <i class="far fa-thumbs-up"></i> 赞
                        </div>
                        <form action="forum/addComment">
                            <div class="post-action" onclick="showCommentForm(${forum.share_id})">
                                <i class="far fa-comment"></i> 评论
                            </div>
                        </form>
                        <div class="post-action">
                            <i class="fas fa-share"></i> 分享
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <%-- 右侧用户信息栏 --%>
    <div class="user-sidebar">
        <%-- 用户头像显示 --%>
        <c:choose>
            <c:when test="${not empty login_user.icon}">
                <img src="${login_user.icon}" alt="用户头像" class="user-avatar-large">
            </c:when>
            <c:otherwise>
                <%-- 默认头像 --%>
                <div style="width: 120px; height: 120px; border-radius: 50%; background-color: var(--secondary-color);
                    display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--text-dark);
                    margin: 0 auto 15px; border: 3px solid var(--accent-color);">
                        ${not empty login_user.username ? login_user.username.substring(0, 1) : 'U'}
                </div>
            </c:otherwise>
        </c:choose>

        <div class="user-name">${login_user.username}</div>
        <div class="user-level">信誉分: ${login_user.trust_score}</div>

        <%-- 用户菜单 --%>
        <ul class="user-menu">
            <li><a href="${pageContext.request.contextPath}/user/profile"><i class="fas fa-user"></i> 个人主页</a></li>
            <li><a href="${pageContext.request.contextPath}/pet/list?user_id=${login_user.user_id}"><i class="fas fa-paw"></i> 我的宠物</a></li>
            <li><a href="${pageContext.request.contextPath}/forum/listById?user_id=${login_user.user_id}"><i class="fas fa-comments"></i> 我的帖子</a></li>
        </ul>
    </div>
</div>

<script>
    // 显示/隐藏发帖框
    document.getElementById('showPostBox').addEventListener('click', function() {
        var postBox = document.getElementById('postBox');
        postBox.style.display = postBox.style.display === 'block' ? 'none' : 'block';
    });

    // 显示评论表单
    function showCommentForm(share_id) {
        // 隐藏所有其他评论框
        document.querySelectorAll('.comment-form-container').forEach(function(form) {
            form.style.display = 'none';
        });

        // 显示当前帖子的评论框
        var commentForm = document.getElementById('commentForm-' + share_id);
        commentForm.style.display = 'block';

        // 滚动到评论框位置
        commentForm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

        // 聚焦到文本区域
        commentForm.querySelector('textarea').focus();
    }

    // 隐藏评论表单
    function hideCommentForm(share_id) {
        var commentForm = document.getElementById('commentForm-' + share_id);
        commentForm.style.display = 'none';
    }
</script>
</body>
</html>